<template>
  <div
    class=""
    :style="{
      height: '100%',
      backgroundColor: '#042037dd',
      '--imgw': getscalepx(1),
      '--imgh': getscalepx(3),
      '--imgr': getscalepx(-13),
      '--imgt': getscalepx(-5),
      '--imgp': getscalepx(5),
    }"
  >
    <beijingdatatablenoscroll
      :header="header"
      :datalist="datalist"
      :coltype="'banma'"
      :nametype="'left'"
      :contentfont="getscalepx(15)"
    />
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";
import axios from '@/utils/requestdp';
import qs from 'qs';

export default {
  name: "datatablereyuanzzn",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      hpObjArr: [],
    };
  },
  computed: {},
  // watch: {
  //   "$store.state.daping.bigScreen": {
  //     handler: function (n, o) {
  //       let n_tmp = n;
  //       let g_bigscreen_data_arr = n_tmp.filter((item) => {
  //         if (item.attrName == "heatplant_pids") {
  //           return true;
  //         }
  //       });
  //       var hpObjArr = [];
  //       var hpPidArr = [];
  //       var pidStrArr = g_bigscreen_data_arr[0].attrValue.split(","); //【2019年12月2日】在大屏配置页面勾选的热源 并且按照顺序传输过来
  //       for (var i = 0; i < pidStrArr.length; i++) {
  //         // var type = pidStrArr[i].split("@@")[0];
  //         var pid = pidStrArr[i].split("@@")[1];
  //         var name = pidStrArr[i].split("@@")[2];
  //         hpPidArr.push(pid);
  //         hpObjArr.push({
  //           pid: pid,
  //           name: name,
  //         });
  //       }
  //       this.hpObjArr = hpObjArr;
  //     },
  //   },

  //   "$store.state.daping.reyuantable": {
  //     handler: function (n, o) {
  //       this.loadData(n);
  //     },
  //   },
  // },
  mounted() {
    //header------------------------------------------------------
    let unitcolor = "#56C5FA";
    this.header = [
      {
        name: `<div style='background-image: url("/configuration/2d/reyuan.png");width: fit-content;background-size: 100% 100%;background-position: center;background-repeat: no-repeat;padding: 5px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>`,
        flex: 23,
      },
      {
        name: `供温<br/><span style="color: ${unitcolor};">(℃)</span>`,
        flex: 10,
      },
      {
        name: `回温<br/><span style="color: ${unitcolor};">(℃)</span>`,
        flex: 10,
      },
      {
        name: `供压<br/><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 10,
      },
      {
        name: `回压<br/><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 10,
      },
      {
        name: `流量<br/><span style="color: ${unitcolor};">(t/h)</span>`,
        flex: 10,
      },
      {
        name: `热量<br/><span style="color: ${unitcolor};">(MW)</span>`,
        flex: 10,
      },
    ];
    this.header = this.header.map((item) => {
      item.name = "<div>" + item.name + "</div>";
      return item;
    });
    this.loadData2();
    this.interval = setInterval(() => {
      this.loadData2();
    }, this.$root.setting.data.interval)
  },
  methods: {
    loadData(data200) {
      let hpObjArr = this.hpObjArr;
      let _this = this;

      for (var i in hpObjArr) {
        for (var j in data200) {
          if (hpObjArr[i]["pid"] == data200[j]["pid"]) {
            hpObjArr[i]["aligntime"] = data200[j]["aligntime"]
              ? new Date(data200[j]["aligntime"]).getTime()
              : undefined;
            hpObjArr[i]["m_001t"] =
              data200[j]["m_001t"] || data200[j]["m_001t"] == 0
                ? data200[j]["m_001t"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_002t"] =
              data200[j]["m_002t"] || data200[j]["m_002t"] == 0
                ? data200[j]["m_002t"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_001p"] =
              data200[j]["m_001p"] || data200[j]["m_001p"] == 0
                ? data200[j]["m_001p"].toFixed(2)
                : undefined;
            hpObjArr[i]["m_002p"] =
              data200[j]["m_002p"] || data200[j]["m_002p"] == 0
                ? data200[j]["m_002p"].toFixed(2)
                : undefined;
            hpObjArr[i]["m_001q"] =
              data200[j]["m_001q"] || data200[j]["m_001q"] == 0
                ? data200[j]["m_001q"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_003qc"] =
              data200[j]["m_003qc"] || data200[j]["m_003qc"] == 0
                ? (data200[j]["m_003qc"] / 3.6).toFixed(1)
                : undefined;
          }
        }
      }
      let dataa = [];
      hpObjArr.map((item) => {
        dataa.push([
          item.name,
          item.m_001t ? item.m_001t : "-",
          item.m_002t ? item.m_002t : "-",
          item.m_001p ? item.m_001p : "-",
          item.m_002p ? item.m_002p : "-",
          item.m_001q ? item.m_001q : "-",
          item.m_003qc ? item.m_003qc : "-",
        ]);
      });
      let resdatalist = [];
      dataa.map((each_row) => {
        resdatalist.push(this.settype(each_row));
      });
      let index = resdatalist.findIndex(item => (item.name.indexOf('二马路') > -1));
      this.datalist = resdatalist;
    },
    settype(data) {
      return data.map((item, index) => {
        if (index != 0) {
          let fff = _.random(0, 100);
          if (fff > 50) {
            if (item > 50) {
              return (
                // '<span style="color: #DA5A28;position: relative;"><div class="tablewarnhigh"></div>' +
                '<span style="color: #DA5A28;position: relative;">' +
                item +
                "</span>"
              );
            } else {
              return (
                // '<span style="color: #139CF6;position: relative;"><div class="tablewarnlow"></div>' +
                '<span style="color: #139CF6;position: relative;">' +
                item +
                "</span>"
              );
            }
          } else {
            return (
              '<span style="color: #ACCAD5;position: relative;">' +
              item +
              "</span>"
            );
          }
        } else {
          return item;
        }
      });
    },
    loadData2() {
      let aaa = [];
      this.nameListHeat = [];
      this.nameListStation = [];
      this.pids = [];
      this.pidsHeat = [];
      this.pidsStation = [];
      axios.get('/bigScreen/bigScreen').then(res => {
        let data = res.data.filter(v => v.attrName === 'heatplant_pids')[0].attrValue.split(',');
        data.forEach(v => {
          this.pids.push(Number(v.split('@@')[1]));
          if (v.split('@@')[0] === 'heatplant') {
            this.pidsHeat.push(Number(v.split('@@')[1]));
            this.nameListHeat.push({
              pid: Number(v.split('@@')[1]),
              name: `<span style="color:#F0BF7B;">${v.split('@@')[2]}</span>`
            })
          } else if (v.split('@@')[0] === 'station') {
            this.pidsStation.push(Number(v.split('@@')[1]));
            this.nameListStation.push({
              pid: Number(v.split('@@')[1]),
              name: `<span style="color:#F0BF7B;">${v.split('@@')[2]}</span>`
            })
          }
          
        })
        let params = {
          pageNum: 1,
          pageSize: 30,
          pids: this.pidsHeat.join(',')
        }
        // 关联告警
        this.warnList = [];
        axios.post('/warn/msg/list?pageNum=1&pageSize=3000', {
          objType: '001' // 热源告警
        }).then(rs => {
          let warnList = rs.rows;
          this.warnList = warnList.filter(w => this.pidsHeat.indexOf(w.pid) > -1)
          // 查询热源监控
          axios.get('/model/heatplantRealtimeMonitor?'+qs.stringify(params)).then(res => {
            this.tableData = res.rows;
            this.nameListHeat.forEach((v, i) => {
              this.tableData.forEach(v2 => {
                if (v.pid === v2.pid) {
                  // this.nameListHeat[i]['daily_heat'] = this.formatVal(v2['daily_heat']);
                  this.nameListHeat[i]['m001t'] = this.formatVal(Number(v2['m001t']).toFixed(1));
                  this.nameListHeat[i]['m002t'] = this.formatVal(Number(v2['m002t']).toFixed(1));
                  this.nameListHeat[i]['m001p'] = this.formatVal(Number(v2['m001p']).toFixed(2));
                  this.nameListHeat[i]['m002p'] = this.formatVal(Number(v2['m002p']).toFixed(2));
                  this.nameListHeat[i]['m001q'] = this.formatVal(Number(v2['m001q']).toFixed(1));
                  this.nameListHeat[i]['m003qc'] = this.formatVal(Number(v2['m003qc']).toFixed(1));
                  this.nameListHeat[i]['name'] = `<span style="color:#F0BF7B;">${v2['name']}</span>`;
                }
              })
              if (!('m001t' in this.nameListHeat[i])) {
                // this.nameListHeat[i]['daily_heat'] = `<span class="default_zzn">--</span>`;
                this.nameListHeat[i]['m003qc'] = `<span class="default_zzn">--</span>`;
                this.nameListHeat[i]['m001q'] = `<span class="default_zzn">--</span>`;
                this.nameListHeat[i]['m001p'] = `<span class="default_zzn">--</span>`;
                this.nameListHeat[i]['m002p'] = `<span class="default_zzn">--</span>`;
                this.nameListHeat[i]['m001t'] = `<span class="default_zzn">--</span>`;
                this.nameListHeat[i]['m002t'] = `<span class="default_zzn">--</span>`;
              }
            })
            this.nameListHeat.forEach((v, i) => {
              this.warnList.forEach(v2 => {
                if (v.pid == v2.pid) {
                  let code = v2.code;
                  let codeList = code.split('-');
                  if (codeList[4] == '003') {
                    let m001q = this.delSpan(this.nameListHeat[i]['m001q'])
                    if (m001q !== '--') {
                      this.nameListHeat[i]['m001q'] = this.formatVal(m001q, String(v2.bound));
                    }
                  } else if (codeList[4] == '004') {
                    let m001t = this.delSpan(this.nameListHeat[i]['m001t']);
                    if (m001t !== '--') {
                      this.nameListHeat[i]['m001t'] = this.formatVal(m001t, String(v2.bound));
                    }
                  } else if (codeList[4] == '005') {
                    let m002t = this.delSpan(this.nameListHeat[i]['m002t']);
                    if (m002t !== '--') {
                      this.nameListHeat[i]['m002t'] = this.formatVal(m002t, String(v2.bound));
                    }
                  } else if (codeList[4] == '006') {
                    let m001p = this.delSpan(this.nameListHeat[i]['m001p']);
                    if (m001p !== '--') {
                      this.nameListHeat[i]['m001p'] = this.formatVal(m001p, String(v2.bound));
                    }
                  } else if (codeList[4] == '007') {
                    let m002p = this.delSpan(this.nameListHeat[i]['m002p']);
                    if (m002p !== '--') {
                      this.nameListHeat[i]['m002p'] = this.formatVal(m002p, String(v2.bound));
                    }
                  }
                }
              })
            })
            aaa = this.nameListHeat.map(v => Object.values(v))
            // 关联告警
            this.warnListStation = [];
            let bbb = [];
            axios.post('/warn/msg/list?pageNum=1&pageSize=3000', {
              objType: '007' // 热力站告警
            }).then(rs => {
              let warnListStation = rs.rows;
              this.warnListStation = warnListStation.filter(w => this.pidsStation.indexOf(w.pid) > -1)
              // 查询热力站数据
              let formdata = new FormData()
              if (this.pidsStation.length) {
                formdata.append('search', `&pid in (${this.pidsStation.join(',')})`)
              }
              // 查询热源监控
              axios.post('/model/substationMonitor?&pageSize=300&pageNum=1', formdata).then(res => {
                let tableData2 = res.data;

                let uniterr = ['南环隔压站（零次）','百荣隔压站（零次）','高新隔压站（零次）']

                tableData2.map(row =>{
                  if (uniterr.indexOf(row.name) != -1) {
                    row['m_003qc'] = (row['m_003qc']/1000).toFixed(0)
                  }
                })

                this.nameListStation.forEach((v, i) => {
                  tableData2.forEach(v2 => {
                    if (v.pid == v2.pid) {
                      // this.nameListStation[i]['jihua'] = this.formatVal(v2['jihua']);
                      this.nameListStation[i]['m_001t'] = this.formatVal(v2['m_001t']);
                      this.nameListStation[i]['m_002t'] = this.formatVal(v2['m_002t']);
                      this.nameListStation[i]['m_001p'] = this.formatVal(v2['m_001p']);
                      this.nameListStation[i]['m_002p'] = this.formatVal(v2['m_002p']);
                      this.nameListStation[i]['m_003q'] = this.formatVal(v2['m_003q']);
                      this.nameListStation[i]['m_003qc'] = this.formatVal(v2['m_003qc']);
                      this.nameListStation[i]['name'] = `<span style="color:#F0BF7B;">${v2['name']}</span>`;
                    }
                  })
                  if (!('m_001p' in this.nameListStation[i])) {
                    // this.nameListStation[i]['jihua'] = `<span class="default_zzn">--</span>`;
                    this.nameListStation[i]['m_003qc'] = `<span class="default_zzn">--</span>`;
                    this.nameListStation[i]['m_003q'] = `<span class="default_zzn">--</span>`;
                    this.nameListStation[i]['m_001p'] = `<span class="default_zzn">--</span>`;
                    this.nameListStation[i]['m_002p'] = `<span class="default_zzn">--</span>`;
                    this.nameListStation[i]['m_001t'] = `<span class="default_zzn">--</span>`;
                    this.nameListStation[i]['m_002t'] = `<span class="default_zzn">--</span>`;
                  }
                })
                this.nameListStation.forEach((v, i) => {
                  this.warnListStation.forEach(v2 => {
                    if (v.pid == v2.pid) {
                      let code = v2.code;
                      if (code === '003-002-001-001-000-0131') {
                        this.nameListStation[i]['name'] = `<span class="red" style="color:#F0BF7B;">${this.nameListStation[i]['name']}</span>`;
                        let jihua = this.delSpan(this.nameListStation[i]['jihua']);
                        this.nameListStation[i]['jihua'] = `<span class="red">${jihua}</span>`;
                        let m_003qc = this.delSpan(this.nameListStation[i]['m_001t']);
                        this.nameListStation[i]['m_003qc'] = `<span class="red">${m_003qc}</span>`;
                        let m_003q = this.delSpan(this.nameListStation[i]['m_001t']);
                        this.nameListStation[i]['m_003q'] = `<span class="red">${m_003q}</span>`;
                        let m001t = this.delSpan(this.nameListStation[i]['m_001t']);
                        this.nameListStation[i]['m_001t'] = `<span class="red">${m001t}</span>`;
                        let m002t = this.delSpan(this.nameListStation[i]['m_002t']);
                        this.nameListStation[i]['m_002t'] = `<span class="red">${m002t}</span>`;
                        let m001p = this.delSpan(this.nameListStation[i]['m_001p']);
                        this.nameListStation[i]['m_001p'] = `<span class="red">${m001p}</span>`;
                        let m002p = this.delSpan(this.nameListStation[i]['m_002p']);
                        this.nameListStation[i]['m_002p'] = `<span class="red">${m002p}</span>`;
                      } else {
                        let codeList = code.split('-');
                        if (codeList[4] == '004') { // 供水温度
                          let m001t = this.delSpan(this.nameListStation[i]['m_001t']);
                          if (m001t !== '--') {
                            this.nameListStation[i]['m_001t'] = this.formatVal(m001t, String(v2.bound));
                          }
                        } else if (codeList[4] == '005') { // 回水温度
                          let m002t = this.delSpan(this.nameListStation[i]['m_002t']);
                          if (m002t !== '--') {
                            this.nameListStation[i]['m_002t'] = this.formatVal(m002t, String(v2.bound));
                          }
                        } else if (codeList[4] == '006') { // 供水压力
                          let m001p = this.delSpan(this.nameListStation[i]['m_001p']);
                          if (m001p !== '--') {
                            this.nameListStation[i]['m_001p'] = this.formatVal(m001p, String(v2.bound));
                          }
                        } else if (codeList[4] == '007') { // 回水压力
                          let m002p = this.delSpan(this.nameListStation[i]['m_002p']);
                          if (m002p !== '--') {
                            this.nameListStation[i]['m_002p'] = this.formatVal(m002p, String(v2.bound));
                          }
                        }
                      }
                    }
                  })
                })
                bbb = this.nameListStation.map(v => Object.values(v))
                let ccc = [...aaa, ...bbb]
                this.warnIdList = [];
                ccc.forEach((c,i) => {
                  this.warnList.forEach(w => {
                    if (c.pid == w.pid) {
                      if (w.code === '003-002-001-001-000-0131') {
                        this.warnIdList.push(i)
                      }
                    }
                  })
                })
                let ddd = [];
                this.pids.forEach(p => {
                  ccc.forEach(c => {
                    if (p == c[0]) {
                      ddd.push(c.splice(1))
                    }
                  })
                })
                // let index = ddd.findIndex(item => (item[0].indexOf('二马路') > -1));
                // let thobj = ddd.splice(index, 1)
                // ddd.splice(ddd.length, 0, ...thobj);
                this.datalist = ddd;
              });
            })
          })
        })
      })
    },
    formatVal(item, type) {
      if (type) {
        if (type === '1') {
          return (
            `<span class="high">${item}</span>`
          );
        } else if (type === '0') {
          return (
            `<span class="low">${item}</span>`
          );
        }
      } else {
        if (item === null || item === undefined || item == Infinity) {
          return `<span class="default_zzn">--</span>`;
        } else {
          return `<span class="default_zzn">${item}</span>`;
        }
      }
      
    },
    // 取html字符串中的值
    delSpan(item) {
      if (item.indexOf('span') > -1) {
        return item.split('</span>')[0].split('>').pop();
      } else {
        return item;
      }
    }
  },
};
</script>
<style lang='scss'>
.tablewarnhigh {
  position: absolute;
  right: var(--imgr);
  top: var(--imgt);
  background-image: url("/configuration/2d/gaojinghigh.png");
  width: var(--imgw);

  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--imgp);
}
.tablewarnlow {
  position: absolute;
  right: var(--imgr);
  top: var(--imgt);
  background-image: url("/configuration/2d/gaojinglow.png");
  width: var(--imgw);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--imgp);
}
.high {
  color: #DA5A28;
}
.low {
  color: #139CF6;
}
.default_zzn {
  color: #A0C8DB;
}
</style>